<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>亿人宝 - 积分商城</title>
    <meta content="" name="keywords"/>
    <meta content="" name="description"/>
    <link rel="stylesheet" th:href="@{/css/common.css}"/>
    <link rel="stylesheet" th:href="@{/css/index.css}" type="text/css">
    <script th:src="@{/script/jquery.min.js}" type="text/javascript"></script>
    <script th:src="@{/script/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/script/axios.min.js}" type="text/javascript"></script>
    <script th:src="@{/layui/layer/layer.js}" type="text/javascript"></script>
</head>
<style type="text/css">
    .pointmall-container {
        padding: 56px 0 0px 97px;
    }

    .floor-list.lg-list {
        margin-left: -32px;
    }

    floor-list {
        min-height: 367px;
    }

    .g-cf, .g-o {
        zoom: 1;
        text-align: left;
    }

    .floor-list li {
        position: relative;
        width: 208px;
        height: 268px;
        background-color: #fff;
        font-size: 14px;
        color: #333;
        text-align: center;
        padding-top: 20px;
        float: left;
        margin: 0 0 32px 32px;
        box-shadow: 0 0 3px rgba(0, 0, 0, .07);
    }

    .floor-list li a {
        display: block;
        width: 100%;
        height: 160px;
        overflow: hidden;
    }

    .floor-list li a img {
        width: 160px;
        height: auto;
    }

    .floor-list .name {
        line-height: 30px;
        height: 30px;
        margin: 11px 8px 0;
        font-size: 18px;
        font-weight: 700;
        word-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .floor-list p {
        line-height: 24px;
    }

    .floor-list .orange {
        margin-bottom: 5px;
    }

    .floor-list p {
        line-height: 24px;
    }

    .orange {
        color: #ff7136;
    }

    .sold-out, .sold-out-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .sold-out-bg {
        opacity: .5;
        background: #000;
    }

    .sold-out-img {
        width: 112px;
        height: 87px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -44px 0 0 -56px;
        background: url(//image.xiaoniu88.com/static/WebXn/dist/page/activity/pointmall/common/img/none-8c60d15474.png) no-repeat;
    }

    .box-dialog-content {
        padding: 58px 58px 42px;
        font-size: 18px;
        color: #747474;
        text-align: center;
        overflow: hidden;
    }

    .box-dialog-btns {
        padding: 0 58px 58px;
        text-align: center;
    }

    .box-dialog-btns button {
        outline: 0;
        padding: 0;
        border: none;
        width: 132px;
        height: 39px;
        line-height: 39px;
        color: #fff;
        background: #ff7136;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        border-radius: 5px;
    }

    .hide {
        display: none;
    }
</style>
<body>
<div id="app">
    <div th:replace="common/public::head"></div>

    <div class="pointmall-container" id="container">
        <ul class="floor-list lg-list g-cf" id="productList" style="display: block;">
            <li v-for="goods in goodsList">
                <a :href="'base/mall/detail/'+goods.id | urlFilter">
                    <img :src="goods.img | urlFilter">
                </a>
                <div><p :title="goods.name" class="name" v-text="goods.name"></p>
                    <p class="orange" v-text="'积分:'+goods.price"></p>
                </div>
                <div @click="showSoldOut" class="sold-out" v-if="goods.stock <= 0">
                    <div class="sold-out-bg"></div>
                    <div class="sold-out-img"></div>
                </div>
            </li>

            <div style="clear: both"></div>
        </ul>
    </div>

    <!--网站底部-->
    <div th:replace="common/public::footer"></div>
    <!--已售罄弹窗-->
    <div id="sold-out-div" style="display: none">
        <div class="box-dialog-content">商品已售罄，下次早点来哦！</div>
        <div class="box-dialog-btns">
            <button>确定</button>
        </div>
    </div>
</div>
<script type="text/javascript">
    const baseUrl = '[[@{/base/}]]';
    new Vue({
        el: '#app',
        data: {
            goodsList: []
        },
        filters: {
            urlFilter: function (val) {
                return '[[@{/}]]' + val;
            }
        },
        methods: {
            //加载积分商品
            loadGoodsList: function () {
                axios.get(baseUrl + 'mallGoods/goodsList')
                    .then(response => {
                        console.log(response);
                        this.goodsList = response.data.obj;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            //打开弹窗
            showSoldOut: function () {
                layer.open({
                    type: 1,
                    title: '提示',
                    content: $('#sold-out-div')
                })
            }
        },
        mounted() {
            this.loadGoodsList();
        }
    });

    //关闭弹窗
    $('.box-dialog-btns button').click(function () {
        layer.closeAll()
    });

</script>
</body>
</html>
